import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-modules';
import {Button, List, Icon, Upload, message} from 'antd';
import {PageHeader} from 'ant-design-pro';
import FilterForm from './FilterForm';
import DataTable from './DataTable';
import DataList from './DataList';
import Toolbar from '../../component/Toolbar';
import EditModal from './NewRoomModal';
import CommonModal from '../../component/CommonModal';
import AddUnitContent from './AddUnitContent.js';
import EditUnitContent from './EditUnitContent.js';

import styles from './style.less';

@inject('HouseholdStore', 'HouseholdAddUnitStore', 'GlobalStore')
@observer
@cssModules(styles)
class SearchList extends Component {
  constructor(props) {
    super(props);
  }

  async componentWillMount() {
    const {location, match, history} = this.props;

    await this.props.HouseholdStore.onWillMount(location, match, history);
    await this.props.GlobalStore.setCurrentPage(this);
  }
  reset() {
    const {onWillMount, reset} = this.props.HouseholdStore;
    onWillMount();
    reset();
  }

  render() {
    const {
      HouseholdAddUnitStore: {addtionUnit, changePassword, addUnitOk},
      HouseholdStore: {batchBuildDelete, getBlock},
    } = this.props;

    let toolbar = [
      {
        type: 'title',
        name: '户室列表',
        bg: 'blue',
        pos: 'left',
      },
      {
        type: 'button',
        name: '从Excel批量导入',
        bg: 'green',
        handleClick: () => {
          this.upload.click();
        },
      },
      {
        type: 'button',
        name: '新增',
        bg: 'green',
        handleClick: addtionUnit,
      },

      {
        type: 'button',
        name: '删除',
        bg: 'red',
        title: '确定要删除所选幢数吗?',
        placement: 'bottomLeft',
        onConfirm: item => {
          batchBuildDelete(item);
        },
      },
    ];

    const props = {
      name: 'file',
      action: '/api/apartment/batchAddInfo',
      headers: {
        authorization: 'authorization-text',
        token: JSON.parse(localStorage.getItem('user_info')).token,
      },
      showUploadList: false,
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          if (info.file.response && info.file.response.result === 'success') {
            getBlock().then(() => {
              message.success(`${info.file.name} 导入成功！`);
            });
          } else {
            message.error(info.file.response.Msg);
          }
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} 导入失败！`);
        }
      },
    };
    return (
      <div>
        <div className={styles['content-card']}>
          <Toolbar modules={toolbar} className={styles['toolbar-wrap']} />
          <div className={styles['data-content']}>
            <DataList />
            <DataTable />
          </div>
          <CommonModal
            title="添加单元"
            width={640}
            type={'new'}
            onOk={addUnitOk}>
            <AddUnitContent />
          </CommonModal>
          <CommonModal
            title="修改单元密码"
            width={640}
            type={'edit'}
            onOk={changePassword}>
            <EditUnitContent />
          </CommonModal>
          <Upload {...props}>
            <span
              style={{display: 'none'}}
              ref={c => {
                this.upload = c;
              }}
            />
          </Upload>
        </div>
      </div>
    );
  }
}

export default SearchList;
